<template>
    <div class="f-tabs-item" @click="onClick" :class="classes" :data-name="name">
        <slot></slot>
    </div>
</template>

<script>
  export default {
    name: "f-tabs-item"
    ,inject:['eventBus']
    ,props:{
      disabled:{
        type:Boolean
        ,default:false
      }
      ,name:{
        type:String|Number
        ,required:true
      }
    }
    ,data(){
      return{
        active:false
      }
    }
    ,computed:{
      classes(){
        return {
          active:this.active
          ,disabled:this.disabled
        }
      }
    }
    ,methods:{
      onClick(){
        if(this.disabled) return;
        this.eventBus&&this.eventBus.$emit('update:selected', this.name, this);
      }
    }
    ,created() {
      this.eventBus&&this.eventBus.$on('update:selected', (name) => {
        this.active = name === this.name;
      });
    }
  }
</script>

<style lang="scss">
    $blue:blue;
    $disabled-text-color:grey;
    .f-tabs-item{
        /*flex-grow:1;*/
        flex-shrink: 0;
        padding:0 2em;
        height:100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        &.active{
            background: red;
            color:$blue;
            font-weight:bold;
        }
        &.disabled {
            color: $disabled-text-color;
            cursor:not-allowed;
        }
    }
</style>
